<template>
	<div class="header-info-box">
		<!-- 头部信息区域start -->
		<div class="info-item-box">
			<el-image v-if="userInfo.headImageUrl" :src="userInfo.headImageUrl" fit="cover"></el-image>
			<div v-else class="user-avatar">用户</div>
			<div class="info-item">
				<p>
					<span>{{ userInfo.nickName ? userInfo.nickName : userInfo.tel }}</span>

					<el-button color="#8A1313" size="small" :disabled="userInfo.userName == '' ? false : true" round class="btn" @click="goToIdentity">
						{{ userInfo.userName == "" ? "实名认证 >" : "已实名" }}
					</el-button>
				</p>
				<p>
					{{ $t("user.chu-ji") }}<el-progress :percentage="50" color="#C39F63"><i></i></el-progress>中级
				</p>
				<p>
					点赞
					<span>{{ 0 }}</span>
					积分
					<span>{{ userInfo.usableIntegral }}</span>
				</p>
			</div>
		</div>
	</div>

	<!-- 标签页start -->
	<div class="tabs">
		<el-tabs v-model="activeName" class="demo-tabs">
			<el-tab-pane label="点赞收藏" name="favorite">点赞收藏</el-tab-pane>
			<!-- <el-tab-pane label="我的发布" name="publish">我的发布</el-tab-pane> -->
			<!-- <el-tab-pane label="我的直播" name="live">我的直播</el-tab-pane> -->
			<el-tab-pane label="积分兑换" name="points">
				<Points />
			</el-tab-pane>
			<!-- <el-tab-pane label="云村民权益" name="cloudBenefit">云村民权益</el-tab-pane> -->
			<el-tab-pane label="个人资料" name="profile">
				<Information />
			</el-tab-pane>
			<el-tab-pane label="实名认证" name="identity">
				<Identity />
			</el-tab-pane>
		</el-tabs>
	</div>
	<!-- 标签页end -->
</template>

<script setup lang="ts">
import { useUserStore } from "@/store/user";

// 获取用户信息
const { userInfo } = storeToRefs(useUserStore());

// 指定当前标签页
const activeName = ref("favorite");
// 点击实名认证事件
const goToIdentity = () => {
	activeName.value = "identity";
};
</script>

<style scoped lang="scss">
.header-info-box {
	padding: 20px 320px;
	background-color: #ffffff;
}
.el-image {
	width: 88px;
	height: 88px;
	border-radius: 50%;
}
.user-avatar {
	display: flex;
	align-items: center;
	justify-content: center;
	width: 88px;
	height: 88px;
	font-size: 24px;
	color: #ffffff;
	cursor: default;
	background-color: #cccccc;
	border-radius: 50%;
}
.info-item-box {
	display: flex;
	align-items: center;
	margin-bottom: 30px;
	.info-item {
		margin-left: 20px;
		p {
			margin: 0;
			&:first-child {
				display: flex;
				align-items: center;
				font-size: 18px;
				font-weight: 700;
				.btn {
					margin-left: 10px;
				}
			}
			&:nth-child(2) {
				display: flex;
				align-items: center;
				margin: 12px 0;
				font-size: 13px;
				color: #c39f63;
			}
			&:last-child {
				font-size: 13px;
				color: #bababa;
				span {
					margin-right: 40px;
					font-size: 16px;
					font-weight: 600;
					color: #333333;
				}
			}
		}
	}
}
:deep(.el-progress) {
	margin-right: -42px;
	margin-left: 10px;
	.el-progress-bar__outer {
		width: 200px;
	}
}
:deep(.el-tabs) {
	.el-tabs__header {
		padding: 0 320px;
		margin-bottom: 20px;
		font-size: 14px;
		background-color: #ffffff;
	}
	.el-tabs__nav-wrap::after {
		background-color: transparent;
	}
	.el-tabs__active-bar {
		background-color: #c39f63;
	}
	.el-tabs__item.is-active {
		color: #c39f63;
	}
	.el-tabs__item {
		color: #333333;
	}
	.el-tab-pane {
		padding: 0 320px;
		margin-bottom: 20px;
	}
}
</style>
